<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="decoration-circle circle-1"></div>
      <div class="decoration-circle circle-2"></div>
      <div class="decoration-circle circle-3"></div>
    </div>

    <!-- 登录卡片 -->
    <div class="login-card">
      <!-- 头部 -->
      <div class="login-header">
        <div class="logo">
          <el-icon class="logo-icon"><Location /></el-icon>
        </div>
        <h1 class="title">景点标注系统</h1>
        <p class="subtitle">Travel Annotation System</p>
      </div>

      <!-- 登录表单 -->
      <div class="login-form">
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          size="large"
          @submit.prevent="handleLogin"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              prefix-icon="User"
              clearable
              @keyup.enter="handleLogin"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="Lock"
              show-password
              clearable
              @keyup.enter="handleLogin"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              size="large"
              :loading="loginLoading"
              @click="handleLogin"
              class="login-button"
            >
              <span v-if="!loginLoading">登录</span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 提示信息 -->
        <!-- <div class="login-tips">
          <el-alert
            title="默认账号信息"
            type="info"
            :closable="false"
            show-icon
          >
            <template #default>
              <p>用户名：<code>admin</code></p>
              <p>密码：<code>123456</code></p>
            </template>
          </el-alert> -->
        <!-- </div> -->
      </div>

      <!-- 底部 -->
      <div class="login-footer">
        <p>&copy; 2024 景点标注系统. All rights reserved.</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { Location, User, Lock } from '@element-plus/icons-vue'

export default {
  name: 'Login',
  components: {
    Location,
    User,
    Lock
  },
  data() {
    return {
      loginLoading: false,
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    // 检查是否已经登录
    this.checkLoginStatus()
    
    // 添加键盘事件监听
    document.addEventListener('keydown', this.handleKeyDown)
  },
  beforeUnmount() {
    // 移除键盘事件监听
    document.removeEventListener('keydown', this.handleKeyDown)
  },
  methods: {
    // 检查登录状态
    checkLoginStatus() {
      const isLoggedIn = sessionStorage.getItem('isLoggedIn')
      const userInfo = sessionStorage.getItem('userInfo')
      
      if (isLoggedIn === 'true' && userInfo) {
        // 已登录，跳转到主页
        this.$router.push('/')
      }
    },

    // 处理登录
    async handleLogin() {
      try {
        // 验证表单
        await this.$refs.loginFormRef.validate()
        
        this.loginLoading = true
        
        // 模拟登录延迟
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 验证账号密码
        if (this.loginForm.username === 'admin' && this.loginForm.password === '123456') {
          // 登录成功
          const userInfo = {
            username: 'admin',
            nickname: '管理员',
            loginTime: new Date().toISOString(),
            permissions: ['admin']
          }
          
          // 保存登录状态到 sessionStorage
          sessionStorage.setItem('isLoggedIn', 'true')
          sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
          
          ElMessage.success('登录成功！')
          
          // 跳转到主页
          setTimeout(() => {
            this.$router.push('/')
          }, 500)
          
        } else {
          // 登录失败
          ElMessage.error('用户名或密码错误！')
        }
        
      } catch (error) {
        console.error('登录失败:', error)
        ElMessage.error('登录失败，请检查输入信息')
      } finally {
        this.loginLoading = false
      }
    },

    // 处理键盘事件
    handleKeyDown(event) {
      // ESC 键清空表单
      if (event.key === 'Escape') {
        this.resetForm()
      }
    },

    // 重置表单
    resetForm() {
      this.$refs.loginFormRef?.resetFields()
      this.loginForm = {
        username: '',
        password: ''
      }
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.circle-1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.circle-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.circle-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 1;
  }
}

/* 登录卡片 */
.login-card {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(24, 144, 255, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 头部样式 */
.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.logo {
  margin-bottom: 20px;
}

.logo-icon {
  font-size: 48px;
  color: #1890ff;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title {
  font-size: 28px;
  font-weight: 700;
  color: #1c1c1c;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #1c1c1c 0%, #1890ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  font-size: 14px;
  color: #8c8c8c;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* 表单样式 */
.login-form {
  margin-bottom: 30px;
}

.login-form .el-form-item {
  margin-bottom: 24px;
}

.login-form .el-input {
  border-radius: 12px;
}

.login-form .el-input__wrapper {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #d9d9d9;
  transition: all 0.3s ease;
  background: #fafafa;
}

.login-form .el-input__wrapper:hover {
  border-color: #1890ff;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

.login-form .el-input.is-focus .el-input__wrapper {
  border-color: #1890ff;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
}

.login-button {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  border: none;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24, 144, 255, 0.3);
}

.login-button:active {
  transform: translateY(0);
}

/* 提示信息 */
.login-tips {
  margin-top: 20px;
}

.login-tips .el-alert {
  border-radius: 12px;
  border: none;
  background: rgba(24, 144, 255, 0.1);
}

.login-tips code {
  background: rgba(24, 144, 255, 0.2);
  color: #1890ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
}

.login-tips p {
  margin: 4px 0;
  font-size: 13px;
}

/* 底部样式 */
.login-footer {
  text-align: center;
  color: #bfbfbf;
  font-size: 12px;
  margin-top: 24px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-container {
    padding: 20px;
  }

  .login-card {
    padding: 30px 20px;
    border-radius: 16px;
  }

  .title {
    font-size: 24px;
  }

  .logo-icon {
    font-size: 40px;
  }

  .circle-1, .circle-2, .circle-3 {
    display: none;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 24px 16px;
  }

  .title {
    font-size: 20px;
  }

  .subtitle {
    font-size: 12px;
  }
}
</style>
